<template>
  <div class="banner-container">
    <el-row>
      <el-col :span="24">
        <el-dialog
          :title="dialogTitle"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <el-form
        label-position="left"
        label-width="100px"
        :model="bannerForm"
        :rules="rules"
        ref="bannerForm"
      > 
        <el-form-item   prop="videoName" label="视频名称：">
          <el-input :disabled="true" v-model="bannerForm.videoName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item prop="coverImg" label="封面：">
          <AvatarImg
            :imageUrl="bannerForm.coverImg"
            @success="handleAvatarSuccess"
          />
        </el-form-item>
        <el-form-item prop="title" label="标题：">
          <el-input :maxlength="10" :minlength="1" v-model="bannerForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input-number
            :disabled="formType === 1"
            v-model="bannerForm.sort"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-switch
            :disabled="formType === 1"
            v-model="bannerForm.status"
            active-value="0"
            inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
              v-if="formType !== 1"
              :loading="loading"
              type="primary"
              @click="confirmHandel('bannerForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="pagination.bannerDatas" row-key="id" border>
          <el-table-column type="index" width="30px"></el-table-column>
          <el-table-column prop="videoName" label="视频名称"></el-table-column>
          <el-table-column prop="title" label="标题"></el-table-column> 
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '0' ? 'success' : 'danger'"
                disable-transitions
                >{{ scope.row.status === "0" ? "启用" : "禁用" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150px">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row, 1, 'banner详情')"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                @click="handleClick(scope.row, 2, '编辑banner')"
                type="text"
                size="small"
                >编辑</el-button
              >
              <el-button @click="delBanner(scope.row)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizeChoose"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AvatarImg from "@/components/ImgUpload/AvatarImg";
import { getCategoryList } from "@/api/video/category";
import { add, getPaginationList, update, del } from "@/api/video/banner";

export default {
  name: "Banner",
  components: { AvatarImg },
  created() {
    this.getPaginationBanners();
    getCategoryList().then((v) => {
      this.categoryOptions = v.data;
    });
  },
  data() {
    return {
      categoryOptions:[],
      formType: 0,
      loading: false,
      dialogVisible: false,
      dialogTitle: "",
      dictTypes: [],
      bannerForm: {
        videoName: "",
        title: "",
        videoCategory: "",
        coverImg: "",
        sort: 1,
        status: "0",
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizeChoose: [5, 10, 15, 20],
        total: 0,
        bannerDatas: [],
      },
      rules: {
        videoName: [{ required: true, message: "请输入类型", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        coverImg: [
          { required: true, message: "请上传封面图片", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    dialogVisible: function () {
      if (this.dialogVisible === false) {
        this.$refs["bannerForm"].resetFields();
      }
    },
  },
  methods: {
    handleAvatarSuccess(url) {
      this.bannerForm.coverImg = url;
    },
    addBanner() {
      this.loading = true;
      add(this.bannerForm)
        .then(() => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.loading = false;
          this.getPaginationBanners();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    updateBanner() {
      this.loading = true;
      update(this.bannerForm)
        .then(() => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.loading = false;
          this.getPaginationBanners();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    delBanner(banner) {
      this.$confirm(
        '是否确认删除视频名为："' + banner.videoName + "的数据项?",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return del(banner.id);
        })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getPaginationBanners();
        });
    },
    handleClick(data, type, title) {
      if (type !== 0) {
        this.bannerForm = JSON.parse(JSON.stringify(data));
      }
      this.dialogTitle = title;
      this.formType = type;
      this.dialogVisible = true;
    },
    getPaginationBanners() {
      const params = {
        pageSize: this.pagination.pageSize,
        pageIndex: this.pagination.currentPage,
      };
      getPaginationList(params).then((res) => {
        this.pagination.bannerDatas = res.data.records;
        this.pagination.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getPaginationBanners();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getPaginationBanners();
    },
    confirmHandel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updateBanner();
          this.loading = true;
        }
      });
    },
  },
};
</script>

<style>
</style>